<style lang="less" scoped>
.demo-auto-complete-item {
  padding: 4px 0;
  border-bottom: 1px solid #f6f6f6;
}
.demo-auto-complete-group {
  font-size: 12px;
  padding: 4px 6px;
}
.demo-auto-complete-group span {
  color: #666;
  font-weight: bold;
  float: left;
}
.demo-auto-complete-group a {
  float: right;
}
.demo-auto-complete-count {
  float: right;
  color: #999;
}
.demo-auto-complete-more {
  display: block;
  margin: 0 auto;
  padding: 4px;
  text-align: center;
  font-size: 12px;
}
// .index {
//   background: #f8f8f9;
// }
.loading {
  animation: myloading 1s linear infinite;
  margin-top: 100px;
}
@keyframes myloading {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.download{
  padding: 18px 40px;
  margin-top: 160px;
  font-size: 16px;
  background-color: #ECF5FF;
  color: #409EFF;
  border-radius:5px;
  letter-spacing:4px;
  border:1px solid #B3D8FF;
}
.download:hover{
  background-color: #409EFF;
  color: #FFFFFF;
  border:1px solid #B3D8FF;
}
.pane-ex{
  margin-bottom: 20px;
}
</style>

<template>
  <div id="index">
    <myheader></myheader>
    <Layout :style="bg" id="content">
      <Layout :style="{padding: '24px 24px'}">
        <el-tabs v-model="activeName">
          <el-tab-pane class="pane-ex" label="总体情况" name="first">
            <el-table
              :data="datalist"
              style="width: 85%;border-radius: 10px;margin:50px auto;"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
            >
              <template v-for="(item,index) in list">
                <el-table-column align="center" :label="item.title">
                  <template slot-scope="scope">
                    <div :style="item.key==='ques'?'text-align:left':'text-align:center'" v-html="scope.row[item.key]"></div>
                  </template>
                </el-table-column>
              </template>
            </el-table>
            <a class="download" :href="this.downloadTotalURL">下载报表</a>
          </el-tab-pane>
          <el-tab-pane class="pane-ex" label="个人情况" name="second">
            <el-table
              :data="datalist2"
              style="width: 85%;border-radius: 10px;margin:50px auto;"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row
            >
              <template v-for="(item,index) in list2">
                <el-table-column align="center" :label="item.title" :key="index">
                  <template slot-scope="scope">
                    <div v-if="item.key!=='detail'" v-html="scope.row[item.key]"></div>
                    <a v-if="item.key==='detail'" @click="detail(scope.row)">查看</a>
                  </template>
                </el-table-column>
              </template>
            </el-table>
            <a class="download" :href="this.downloadPersonURL">下载报表</a>
          </el-tab-pane>
        </el-tabs>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import header from "../components/header.vue";
import { workAnalysisTotal, workAnalysisPerson, getworkAnalysisExcel } from "../api/api";
export default {
  data: function() {
    return {
      flags: [],
      bg: {
        width: `${window.innerWidth}px`,
        height: "auto",
        overflow: "scroll"
      },
      activeName: "first",
      list: [
        {
          title: "知识点",
          key: "pointTltle"
        },{
          title: "题目信息",
          key: "ques"
        },{
          title: "题型",
          key: "type"
        },{
          title: "应作人数",
          key: "stuNum"
        },
        {
          title: "答对人数",
          key: "right"
        },
        {
          title: "正确率",
          key: "percent"
        }
      ],
      list2: [
        {
          title: "姓名",
          key: "realName"
        },{
          title: "学号",
          key: "stuNo"
        },{
          title: "总题数",
          key: "question_num"
        },{
          title: "答对题数",
          key: "right"
        },
        {
          title: "正确率",
          key: "percent"
        },
        {
          title: "详细报告",
          key: "detail"
        }
      ],
      datalist: [],
      datalist2: [],
      seq: 0,
      downloadPersonURL : "",
      downloadTotalURL : "" 
    };
  },
  created() {
    if (JSON.parse(sessionStorage.getItem("homeworkSeq")) != null) {
      this.seq = JSON.parse(sessionStorage.getItem("homeworkSeq")).seq;
      if (process.env.NODE_ENV === "development") {
        this.downloadPersonURL = "http://localhost:8080/api/getworkAnalysisExcel/?seq="+this.seq+"&type=Person";
        this.downloadTotalURL = "http://localhost:8080/api/getworkAnalysisExcel/?seq="+this.seq+"&type=Total";
      } else if (process.env.NODE_ENV === "production") {
        this.downloadPersonURL = "https://www.ourspark.org/api/getworkAnalysisExcel/?seq="+this.seq+"&type=Person";
        this.downloadTotalURL = "https://www.ourspark.org/api/getworkAnalysisExcel/?seq="+this.seq+"&type=Total";
      }
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        let content_top = document.getElementById("content").offsetTop;
        this.bg.height = `${window.innerHeight - content_top}px`;
        this.bg.width = `${window.innerWidth}px`;
      })();
    };
    let content_top = document.getElementById("content").offsetTop;
    this.bg.height = `${window.innerHeight - content_top}px`;
    this.getdata();
  },
  components: {
    myheader: header
  },
  methods: {
    download(type) {
      getworkAnalysisExcel({
        seq: this.seq,
        type: type
      }).then(res => {
        if(res.state===false){
          this.$Message.error(res.msg);
        }
      }).catch(error => {
        this.$Message.error(error.status);
      })
    },
    detail(user) {
      sessionStorage.setItem(
        "homeworkDetail",
        JSON.stringify({
          seq: this.seq,
          realName: user.realName,
          UUID: user.UUID
        })
      );
      this.$router.push({
        name: "workDetailPage"
      });
      
    },
    getdata() { 
      workAnalysisTotal({
        seq: this.seq
      })
      .then(response => {
        //在线编程
        if (response.state === true) {
          this.datalist = response.data;
        } 
      })
      .catch(error => {
        this.$Message.error(error.status);
      });
      workAnalysisPerson({
        seq: this.seq
      })
      .then(response => {
        //在线编程
        if (response.state === true) {
          this.datalist2 = response.data;
          // console.log(response.data)
        } 
      })
      .catch(error => {
        this.$Message.error(error.status);
      });
    }
  }
};
</script>